<template>
  <div class="homePlayListContainer">
    <div class="topCard" @click="gotoSongSheet(topList[0].id)">
      <img :src="topList[0]?.coverImgUrl" alt="" />
      <div
        class="cover"
        :style="{ backgroundImage: `url(${topList[0]?.coverImgUrl})` }"
      ></div>
      <div class="topInfo">
        <div class="topInfoRow">
          <div class="crownText">精品歌单</div>
        </div>
        <div class="topInfoRow">
          <div class="crownName">
            {{ topList[0]?.name }}
          </div>
          <div class="crownName2">
            {{ topList[0]?.copywriter }}
          </div>
        </div>
      </div>
    </div>
    <div class="categorySelector">
      <div class="expandBtn" ref="tagsRef">
        <span class="btnLabel" @click="toggleExpandTag">
          {{ queryTag === "全部" ? "全部歌单" : queryTag }}
        </span>
        <div class="expandTags" v-if="showExpandTags">
          <div
            class="hotTagsHeader"
            :class="queryTag === '全部' && 'sleectedTag'"
            @click="(queryTag = '全部'), (current = 1)"
          >
            <span>全部歌单</span>
          </div>
          <div
            v-for="tag in expandTagsData"
            :key="tag.category"
            class="hotTagRow"
          >
            <div class="cetegoryName">
              <div>
                {{ tag.name }}
              </div>
            </div>
            <div class="categroyDetails">
              <div
                class="categoryDetailTag"
                :class="queryTag === item.name && 'sleectedTag'"
                v-for="item in tag.children"
                :key="item.id"
                @click="(queryTag = item.name), (current = 1)"
              >
                <!--type为0就hot-->
                <div class="detailInnerLabel">
                  {{ item.name }}
                  <span v-if="item.type === 0" class="hotTag"> hot </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hotTags">
        <span
          class="hotTagItem"
          :class="queryTag === tag.name && 'hotTagSelected'"
          v-for="tag in hotTags"
          :key="tag.id"
          @click="(queryTag = tag.name), (current = 1)"
        >
          {{ tag.name }}
        </span>
      </div>
    </div>
    <div class="playListContainer">
      <div class="playListItem" v-for="play in playList" :key="play.id">
        <PlayListCard :song="play" @on-play="gotoSongSheet(play.id)" />
      </div>
    </div>
    <div class="paginationCpnt">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        background
        :pageSize="limit"
        v-model:currentPage="current"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed, ref, watch, watchEffect, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import {
  useTopPlayList,
  useHqTags,
  useHotListCategory,
  useTopPlayListTrue,
} from "@/hooks/albumQueryHook";
import useCommonStore from "@/stores/common";

import PlayListCard from "@/components/PlayListCard/PlayListCard.vue";

const router = useRouter();
const { topList, queryTopList } = useTopPlayList();
const { tags, queryHqTags } = useHqTags();
const { hotTags, queryHostList } = useHotListCategory();
const { playList, total, queryPlayList } = useTopPlayListTrue();
const commonStore = useCommonStore();

const tagsRef = ref<null | HTMLElement>(null);
const showExpandTags = ref<boolean>(false);
const queryTag = ref<string>(commonStore.playListCat || "全部");

const current = ref<number>(1);
const limit = ref<number>(50);

const expandTagsData = computed(() => {
  const result: any = [];
  Object.keys(commonStore.playListCategoryDict).forEach((key: string) => {
    result.push({
      category: Number(key),
      name: commonStore.playListCategoryDict[Number(key)],
      children: [],
    });
  });

  if (tags.value instanceof Array) {
    tags.value.forEach((f) => {
      const idx = result.findIndex((data: any) => {
        return Number(f.category) === Number(data.category);
      });
      if (idx >= 0) {
        result[idx].children.push(f);
      }
    });
  }
  return result;
});

const gotoSongSheet = (id: number) => {
  // commonStore.setAlbumPageId(id);
  router.push({
    name: "albumAndSongSheet",
    query: {
      id: id,
    },
  });
};

const handleClickOutside = (event: Event) => {
  if (!tagsRef.value?.contains(event.target as HTMLElement)) {
    showExpandTags.value = false;
  }
};

const toggleExpandTag = () => {
  showExpandTags.value = !showExpandTags.value;
};

onMounted(() => {
  queryTopList({ limit: 1, offset: 0, cat: queryTag.value });
  queryHqTags();
  queryHostList();

  queryPlayList({
    limit: limit.value,
    offset: (current.value - 1) * limit.value,
    cat: queryTag.value,
  });

  document.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});

// 根据tag查询
watch([queryTag, current], ([query, current], [pervQuery, prevCurrent]) => {
  let page = Number(current);
  commonStore.setPlayListCat(query);
  queryTopList({ limit: 1, offset: 0, cat: query });

  queryPlayList({
    limit: 50,
    offset: (page - 1) * 50,
    cat: query,
  });
});
// watch(
//   () => pagination.value.current,
//   (current, pervCurr) => {
//     queryPlayList({
//       limit: 50,
//       offset: (current - 1) * 50,
//       cat: queryTag.value,
//     });
//   }
// );
</script>

<script lang="ts">
export default {
  name: "playList",
};
</script>
<style scoped lang="less">
.homePlayListContainer {
  padding-top: 20px;
  .topCard {
    position: relative;
    width: 100%;
    height: 170px;
    border-radius: 6px;
    overflow: hidden;
    padding: 15px;
    display: flex;
    .cover {
      height: 140px;
      width: 140px;
      border-radius: 4px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
      z-index: 5;
    }
    .topInfo {
      margin-left: 10px;
      height: 140px;
      position: relative;
      z-index: 10;
      flex: 1;
      .topInfoRow {
        width: 100%;
        text-align: left;
        height: 70px;
        display: flex;
        align-items: center;
        .crownName {
          font-size: 16px;
          color: #fff;
        }
        .crownName2 {
          margin-top: 12px;
          font-size: 10px;
          color: #ffffffa6;
        }
        .crownText {
          width: 102px;
          height: 30px;
          line-height: 30px;
          color: #e7aa5a;
          border: 1px solid #e7aa5a;
          border-radius: 15px;
          text-align: center;
          font-size: 14px;
        }
        &:last-child {
          flex-direction: column;
          align-items: flex-start;
        }
      }
    }
    img {
      position: absolute;
      z-index: 0;
      top: -10%;
      left: -10%;
      object-fit: cover;
      width: 120%;
      height: 120%;
      filter: blur(40px) brightness(60%);
      // transform: translate(-10%, -10%);
    }
  }
  .categorySelector {
    height: 30px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .expandBtn {
      width: 100px;
      height: 30px;

      .btnLabel {
        display: inline-block;
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        text-align: center;
        border: 1px solid #d9d9d9;

        font-size: 14px;
        line-height: 30px;
        border-radius: 15px;
        cursor: pointer;
        &:hover {
          background-color: rgb(242, 242, 242);
        }
      }
      color: #333;
      position: relative;

      .expandTags {
        .hotTagsHeader {
          margin-bottom: 20px;
          height: 56px;
          border-bottom: 1px solid #ddd;
          display: flex;
          align-content: center;
          align-items: center;

          span {
            display: inline-block;
            height: 28px;
            border-radius: 14px;
            text-align: center;
            line-height: 28px;
            margin-left: 16px;

            font-size: 14px;
            width: 80px;
          }
          &.sleectedTag {
            span {
              background-color: #fef5f5;
              color: #ec4141;
            }
          }
        }
        .hotTagRow {
          min-height: 40px;
          margin-bottom: 20px;
          width: 100%;
          display: flex;

          .cetegoryName {
            width: 120px;
            display: flex;
            height: 100%;
            font-size: 14px;
            align-items: flex-start;
            padding-left: 16px;
            > div {
              height: 24px;
              color: #cfcfcf;
            }
          }
          .categroyDetails {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            .categoryDetailTag {
              width: calc(100% / 6);
              cursor: pointer;
              &:hover {
                color: #ec4141;
              }

              height: 24px;
              font-size: 14px;
              margin-bottom: 16px;
              .hotTag {
                color: #ec4141;
                font-size: 12px;
                transform: scale(0.6);
              }
              .detailInnerLabel {
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 0 8px;
                width: auto;
              }
              &.sleectedTag {
                .detailInnerLabel {
                  background-color: #fef5f5;
                  color: #ec4141;

                  border-radius: 12px;
                }
              }
            }
          }
        }
        width: 750px;
        cursor: default;
        background-color: #fff;
        position: absolute;
        z-index: 40;
        top: 36px;
        left: 0px;
        border-radius: 6px;
        box-shadow: 0 0 8px 0.2px rgba(10, 10, 10, 0.1);
      }
    }
    .hotTags {
      display: flex;
      .hotTagItem {
        margin-left: 20px;
        font-size: 12px;
        color: #777;
        cursor: default;
        height: 18px;
        padding: 0 6px;
        &:hover {
          color: #444;
        }
        &.hotTagSelected {
          color: #ec4141;
          border-radius: 8px;
          background-color: rgb(242, 242, 242);
        }
      }
    }
  }

  .playListContainer {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    .playListItem {
      width: calc((100% - 80px) / 5);
      margin-right: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
  .paginationCpnt {
    height: 40px;
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
